<template>
  <div class="info" v-if="user">
    <div class="img-box" v-if="box == 'IMG'">
      <el-upload
        action="/api/meta/upload/img"
        :show-file-list="false"
        accept=".jpg, .jpeg, .png, .gif, .bmp"
        :on-success="uploadSuccess"
      >
        <img
          v-if="imageUrl"
          :src="'/api/'+imageUrl"
          class="user-img"
        />
        <!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
        <el-avatar v-else shape="square" :size="240" style="font-size:80px;" class="user-img">{{
          user.name
        }}</el-avatar>
      </el-upload>
    </div>
    <div class="img-box" v-if="box == 'PWD'">
      <el-form
        :model="pwdForm"
        :rules="rules"
        status-icon
        ref="pwdForm"
        label-width="80px"
      >
        <el-form-item label="原密码" prop="oldPassword">
          <el-input
            type="password"
            v-model="pwdForm.oldPassword"
            size="mini"
            show-password
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input
            type="password"
            v-model="pwdForm.newPassword"
            size="mini"
            show-password
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item label="重复密码" prop="confirmPassword">
          <el-input
            type="password"
            v-model="pwdForm.confirmPassword"
            size="mini"
            show-password
            autocomplete="off"
          />
        </el-form-item>
        <div>
          <el-link type="primary" icon="el-icon-check" @click="savePwd"
            >保存</el-link
          >
        </div>
      </el-form>
      <el-divider />
    </div>
    <div class="toolbar" v-if="box == 'IMG'">
      <el-link size="small" class="btn" @click="saveImg">保存照片</el-link>
      <el-link size="small" class="btn" @click="updatePwd">修改密码</el-link>
      <el-divider />
    </div>
    <div>
      <div class="edit-item" v-for="(item, i) in fields" :key="i">
        <i :class="item.icon ? item.icon : 'el-icon-document'" />
        <div class="edit-item-context">
          <span class="edit-item-label">{{item.title}}</span>
          <edit-item
            v-if="item.dictName"
            v-model="userInfo[item.key]"
            :type="item.type"
            size="mini"
            width='180px'
            :dictName="item.dictName"
            :readonly="item.readonly"
            class="edit-item-value"
          />
          <edit-item
            v-else
            v-model="userInfo[item.key]"
            :type="item.type"
            size="mini"
            width='180px'
            :readonly="item.readonly"
            class="edit-item-value"
          />
        </div>
        <div class="edit-item-btn">
          <el-link icon="el-icon-edit" type="primary" v-if="item.update==2" @click="item.readonly=false;item.update=3">修改</el-link>
          <el-link icon="el-icon-edit" type="primary" v-if="item.update==3" @click="item.readonly=true;item.update=2">保存</el-link>
        </div>
      </div>
    </div>
  </div>
  <div class="info" v-else></div>
</template>

<script>
import EditItem from "@comp/form/EditItem";
const BOXTYPE = { IMG: "IMG", PWD: "PWD" };
/**
 * update:1=只读，2=可修改，3=正在修改
 * data、addre:true=分别使用日期和自定义地址组件
 * radio、check、options:Array=分别使用单选、多选、下拉列表
 */
const defaultFields = [
  { key: "name", type:"text", icon: "el-icon-user", title: "姓名", readonly:true, update: 1 },
  {
    key: "sex",
    title: "性别",
    update: 1,
    type:"radio",
    dictName: "性别",
    readonly:true,
  },
  { key: "birthday", type:"date", title: "生日", readonly:true, update: 2 },
  {
    key: "hobby",
    title: "爱好",
    type:"check",
    dictName:"爱好",
    update: 2, readonly:true,
  },
  {
    key: "position",
    title: "职务",
    type:"select",
    dictName:"test",
    update: 2, readonly:true,
  },
  { key: "number", type:"text", title: "警号", readonly:true, update: 1 },
  { key: "mobile", type:"text", icon: "el-icon-phone", readonly:true, title: "电话", update: 2 },
  { key: "addre", type:"addre", title: "家庭住址", readonly:true, update: 2 },
];
export default {
  components: { EditItem },
  props: {
    user: Object,
    fields: {type:Array,default:()=>defaultFields},
  },
  data() {
    return {
      userInfo:{},
      box: BOXTYPE.IMG,
      imageUrl: "",
      pwdForm: {
        oldPassword: "",
        newPassword: "",
        confirmPassword: "",
      },
      rules: {
        oldPassword: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 6,
            max: 32,
            message: "长度在 6 到 32 个字符",
            trigger: "blur",
          },
        ],
        newPassword: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 6,
            max: 32,
            message: "长度在 6 到 32 个字符",
            trigger: "blur",
          },
        ],
        confirmPassword: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 6,
            max: 32,
            message: "长度在 6 到 32 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    updatePwd() {
      this.box = BOXTYPE.PWD;
    },
    saveImg() {
      this.box = BOXTYPE.IMG;
    },
    savePwd() {
      this.box = BOXTYPE.IMG;
    },
    saveItem(field, value) {
      console.log(field, value);
    },
    uploadSuccess(res, file) {
      const {success,result,code,msg}=res
      if (success){
        if (result.hasOwnProperty("rows")){
          if (result.rows.length>0){
            this.imageUrl = result.rows[0].url
          }
        }
      }
    },
  },
  created(){
    this.userInfo = {...this.user,sex:1,hobby:[],position:1,addre:{code:'',addre:''},number:'030001',birthday:new Date()}
    console.log('okokooko',this.userInfo)
  }
};
</script>

<style lang="less" scoped>
.info {
  padding: 10px;
}
.img-box,
.toolbar {
  text-align: center;
  padding-bottom: 10px;
  .btn {
    margin: 0px 30px 0px 30px;
  }
}
.user-img {
  background-color: #ececec;
  border-radius: 120px;
  height: 240px;
  width: 240px;
}
.edit-item{
  display: flex;
  padding: 10px;
  font-size: 14px;
  i{
    flex: 0 0 20px;
    width:20px;
    justify-content: flex-start;
  }
  .edit-item-context{
    width:100%;
    display:flex;
    .edit-item-label{
      width:80px;
      flex:0 0 80px;
      text-align: left;
      justify-content: flex-start;
    }
    .edit-item-value{
      width:100%;
      text-align: right;
      .el-date-editor.el-input{
        width:180px !important;
      }
      .el-date-editor.el-input__inner{
        width:180px !important;
      }
    }
  }
  .edit-item-btn{
    flex:0 0 80px;
    text-align: center;
    width:80px;
  }
}
.el-form-item__error {
  line-height: 0 !important;
  padding-top: 2px !important;
}
</style>
